import React from "react";
import { Card, Button } from 'antd';
export default class Base02 extends React.Component {
    /**
         * 组件中的状态：state
         * 以前我们操作页面的元素的变化，都是修改DOM，操作DOM
         * 但是有了React优秀的框架，我们不在推荐操作DOM，页面元素的改变使用State进行处理
    **/
    constructor(props) {
        super(props);
        this.state = {
            apple: 10
        }
    }

    increment() {
        //回掉
        let apple = this.state.apple + 1
        this.setState({
            apple: apple
        }, function () {
            console.log("apple回调", this.state.apple)
        })
        console.log("apple", this.state.apple)

    }

    async  decrement() {
        // promise  async 和 await
        await this.decrementAsync({ apple: this.state.apple - 1 });
        console.log(this.state.apple);
    }
    decrementAsync(state) {
        return new Promise((resolve) => {
            this.setState(state, resolve);
        })
    }

    render() {

        return (
            <div>
                <div>
                    <Card title="苹果加减" bordered={false}>
                        <p>我有{this.state.apple}个苹果</p>
                        <Button onClick={this.decrement.bind(this)} type="danger" >减一个苹果</Button>
                        <Button onClick={this.increment.bind(this)} className="margin_left_sm" type="primary">加一个苹果</Button>
                    </Card>
                </div>

            </div>
        )
    }
}